前言：

前面我們介紹了很多html, css, php和mysql相關的內容了！今天我們要繼續來介紹JavaScript！這個JavaSript呢可以說是目前做網頁脫離不了的語言，很多的網頁開發工具都是從他繼續衍伸的，像是Jquery, React.js, vue.js等等。

而在學這些以前JavaScript是最最最重要的基本功，那在開始之前阿森推薦大家可以去看看JavaScript發明者的一個訪談影片：

https://www.youtube.com/watch?v=IPxQ9kEaF8c&ab_channel=ieeeComputerSociety

可以知道一些這個語言當初開發時的想法，我相信也有助於各位繼續學習。

那我大概會分三天來講，第一天先介紹他身為程式語言基本的幾種語法，第二天來講他如何與網頁DOM做互動，第三天我們就來寫一個簡單的網頁吧！

前置作業：

這裡阿森推薦大家使用Visual Studio code來做JavaScript的編寫，因為VS Code的workspace介面在建立網頁架構非常方便。

那我們先創一個新的資料夾：

再來我們直接將這個資料夾拉到VS Code左邊的workspace裡，這時候應該會出現一個確認選項：

按Add Folder to Workspace後就大功告成了！

接下來我們可以按右鍵新增以下兩個檔案：

再來我們加入前面幾週用過的基本html架構，在vs code可以直接打一個!然後按enter：

接下來如果我們要引用javascript檔案，也就是.js檔，我們可以在這個結尾標籤上面加一行：

<script src="./app.js"></script>

記得通常都是加在body的最下面，因為瀏覽器是從上往下讀的，如果你在JavaScript檔裡面先呼叫了一個還沒有宣告的tag就會出錯。

那到這邊我們前置作業就完成了！

基本語法：

變數宣告：

JavaScript中主要宣告變數的用法有兩種，分別是var和let，而這兩者的差別簡單來說，就是var的作用域是函式作用域(function scope)，所以可能會產生不小心更動到全域變數的情況，這常常會造成之後debug時不知道問題出在哪。

這時候let就出現了，let的作用域是區塊作用域(block scope)，在函數中使用let就不用擔心會動到外面的變數，這個概念也比較接近一般程式語言宣告變數的概念。

而JavaScript的變數基本型態有以下幾種：

String Data Type:

var a = "hello world";

Number Data Type:

var a = 100;
var b = 1.5;

Boolean Data Type:

var isOdd = true;
var isEven = false;

Undefined Data Type:

var a;

Null Data Type:

var a = null;

物件宣告及使用方法：

var dog = {
	"name": "Luci",
	"age": 3,
	"color": "black and white"
};

console.log(dog.name);//Luci

陣列宣告及使用方法：

var colors = ["red", "orange", "yellow"];

console.log(colors[0]);//red

函式宣告及使用方法：

function saySomeThing(name){
	console.log("hello "+name);
}

saySomeThing("Sen");//hello Sen

如果要確認一個變數的型態可以用：

var a = 100;
console.log(typeof a); //number

動手寫寫看：

接下來讓我們試試看上面的指令吧！

為了方便起見可以先在VS Code的Extention搜尋live server。

安裝好之後右下角應該會出現這個"go live"的按鈕：

把他點下去之後在chrome打開http://127.0.0.1:5500/index.html這個網址，這時候應該還是一片空白：

再來我們把剛剛的其中一個code貼到app.js中：

然後按下f12裡面的Console：

可以看到我們要log的訊息出現在右邊，這就是console.log的功能，有點像是其他語言的print，是之後幫助我們debug的好工具！

大家也可以嘗試把其他指令貼上去試試看。

小結：

今天介紹了JavaScript的幾個前置環境、基本資料型態還有一些用法，其實其他的像是for loop迴圈等功能都和一般程式語言的用法差不多，只要先會這些基本變數宣告剩下應該可以上手的很快。

接下來我會繼續介紹JavaScript如何和網頁互動，講解DOM的基本概念，那我們就明天再見啦！